<!--
 * @Description: 提现
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-06 13:55:38
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-09 11:29:04
 * @FilePath: \jiekuan-app\src\subPages\other\withdrawal.vue
-->
<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title="提现"
        :background="nav_background"
        title-color="#fff"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
      ></u-navbar>
    </div>
    <div class="page-content">
      <div class="amount_box">可提现金额（元）：<span class="text">688.00</span></div>
      <div class="hint">
        <div class="title">提现规则</div>
        <div class="u-m-t-20">
          用户每月可提现三次，每笔提现金额为10*N，N为自然数。 冻结金额为未完成交易所获得的金额，该金额会在交易完成
          后七日自动解冻。如您有任何问题请联系客服QQ:12345678
        </div>
      </div>
      <div class="bank_box u-flex u-col-center u-row-between">
        <span>银行账号</span>
        <div class="bank_box_btn" @click="handleClick({ type: 'binding' })">绑定银行卡</div>
      </div>
      <div class="withdrawal_box">
        <u-input
          v-model="value"
          type="number"
          :clearable="false"
          placeholder="输入需要提现的金额"
          height="90"
          class="withdrawal_input"
        />
        <button class="withdrawal_btn u-m-t-32" @click="handleClick({ type: 'withdrawal' })">提现</button>
      </div>
    </div>
    <div class="page-footer"></div>
    <u-popup v-model="isPopup" width="90%" mode="center" border-radius="10" closeable>
      <view class="pop_box">
        <div>你的银行卡</div>
        <u-form :model="form_msg" ref="uForm" label-width="0" :border-bottom="false" class="form_box u-m-t-40">
          <u-form-item label="" :border-bottom="false">
            <u-input v-model="form_msg.bank" :clearable="false" placeholder="银行卡号" />
          </u-form-item>
          <u-form-item label="" :border-bottom="false">
            <u-input v-model="form_msg.mobile" :clearable="false" placeholder="银行预留手机号" />
          </u-form-item>
          <u-form-item label="" :border-bottom="false">
            <u-input v-model="form_msg.name" :clearable="false" placeholder="持卡人姓名" />
          </u-form-item>
          <u-form-item label="" :border-bottom="false">
            <u-input v-model="form_msg.id_number" :clearable="false" placeholder="身份证号" />
          </u-form-item>
        </u-form>
        <button class="withdrawal_btn u-m-t-32" @click="handleClick({ type: 'binding_submit' })">绑定</button>
      </view>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: 'Withdrawal', // 页面名称
  components: {}, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { backgroundImage: 'linear-gradient(45deg, #5735B1, #3D4AD7)' },
      value: null, // 提现金额
      isPopup: false, // 弹窗
      form_msg: { bank: '', mobile: '', name: '', id_number: '' }, // 银行卡绑定数据
      rules: {
        name: [{ required: null, message: '请输入持卡人姓名', trigger: 'blur', type: 'string' }],
        mobile: [
          { required: null, type: 'number', message: '请输入手机号' },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            trigger: ['blur'],
          },
        ],
        bank: [
          { required: null, type: 'number', message: '请输入银行卡号' },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.bankId(value)
            },
            message: '银行卡号不正确',
            trigger: ['blur'],
          },
        ],
        id_number: [
          { required: null, type: 'number', message: '请输入身份证号' },
          {
            validator: (rule, value, callback) => {
              if (value) {
                return this.$u.test.idCard(value)
              }
              return true
            },
            message: '身份证号不正确',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    handleClick(options) {
      const { type } = options
      switch (type) {
        case 'binding': // 绑定
          this.isPopup = true
          break
        case 'withdrawal': // 提现
          break
        case 'binding_submit': // 绑定--弹窗
          break
        default:
          break
      }
    },
    // 提现申请
    apiPostCreate() {
      const params = { applyAmount: this.value, applyContent: this.value, transChannel: 0 }
      this.$u.api.PostCreate(params).then((res) => {})
    },
  }, // 挂载一些方法
  onLoad(options) {
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page-content {
  background: #f0f0f0;
}
.amount_box {
  width: 710rpx;
  height: 130rpx;
  background: #fcc307;
  border-radius: 8rpx;
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  line-height: 130rpx;
  padding-left: 40rpx;
  .text {
    font-size: 38rpx;
    font-weight: bold;
    color: #d7443e;
  }
}
.hint {
  padding: 25rpx 10rpx;
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #969696;
  line-height: 38rpx;
  .title {
    font-size: 25rpx;
    font-family: Microsoft YaHei UI;
    font-weight: 400;
    color: #000000;
    line-height: 25rpx;
  }
}
.bank_box {
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-radius: 8rpx;
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #000000;
}
.bank_box_btn {
  padding: 10rpx 20rpx;
  height: 60rpx;
  border-radius: 30rpx;
  border: 1rpx solid #969696;
}
.withdrawal_box {
  margin-top: 100rpx;
}
.withdrawal_input {
  padding-left: 60rpx !important;
  background: #ffffff;
  border-radius: 45rpx;
}
.withdrawal_btn {
  width: 100%;
  height: 90rpx;
  background: #fcc307;
  border-radius: 45rpx;
  font-size: 42rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  line-height: 90rpx;
}
.pop_box {
  padding: 30rpx 20rpx 20rpx;
  font-size: 35rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #000;
  text-align: center;
}
.form_box .u-form-item {
  padding: 0 10rpx;
  border: 1rpx solid rgb(210, 207, 207);
  border-radius: 35rpx;
  margin-bottom: 20rpx;
}
</style>
